$(function (){
    // 加载商品列表数据并渲染
    $.ajax({
        url: '../js/goods.json',
        type: 'get',
        dataType: 'json',
        success: function (data){
            var goods=""
            var strDom=""
            $.each(data,function (index,item){
                goods =`
                
                    <li class="a1 fl " dataid="${item.id}">
                    <a href="./page4.html">
                        <img src="${item.imgurl}" alt=""><br>
                        <span>${item.title}</span>
                        <p>${item.price}</p>
                        </a> 
                    </li>     
                `
                    strDom += goods
            })
            $('.back2-box3 ul').html(strDom)

            $('.back2-box3 ul').on("click",'.a1',function(){
                // 定义一个数组存储商品id-用于购物车渲染
                //定义一个id用于详情页渲染
                // var shid = []
                var id =$(this).attr("dataid")
                // shid.push({id})
                // console.log(shid)
                // localStorage.setItem('shid',JSON.stringify(shid))    //localStorage.setItem(key,value)：将value存储到key字段
                localStorage.setItem('id',id)    //localStorage.setItem(key,value)：将value存储到key字段
            })
            // $('back2-box3 ul').on("click",'.a1',function(){
            //     localStorage.setItem('id','id')
            // })
        }
        // <a href="./page4.html"></a>
       
    })
    
})